<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地球旋转</title>
		<style type="text/css">
			.earthrotate{
				width: 310px;
				height: 310px;
				background-image: url(images/earth.png);/*设置背景图*/
				border-radius: 155px;
				
				position: relative;/*设置坐标系*/
				
				/*
				  创建动画，设置参数
				  run动画名称 2s执行时间 infinite反复执行，linear均匀
				*/
				/*animation: run 10s infinite;它的速度不均匀，前快后慢不统一*/
				animation: run 10s linear infinite alternate ;/*解决速度不均匀的问题：用linear参数*/
			}
			
			/*鼠标移入，地球暂停旋转，鼠标移出，地球继续旋转*/
			.earthrotate:hover{
				animation-play-state: paused;/*暂定状态*/
			}
			
			/*定义动画的关键帧
			  变形（形状的变化） transfrom
			  rotate旋转，0deg，从0°开始旋转
			*/
			@keyframes run{
				from{transform: rotate(0deg);left: 0px;}
				to{transform: rotate(360deg);left: 700px;}
			}
		
		</style>
	</head>
	<body>
		<h3>地球旋转动画效果</h3>
		<div class="earthrotate"></div>
	</body>
</html>
